<template>
    <div class="home">
        <el-container class="home-container">
            <!--            左边侧边-->
            <el-aside :width="isCollapse?minWidth:maxWidth">
                <div class="home-logo">
                    <el-menu background-color="#3f4d67"
                             text-color="#fff"
                             router>
                        <el-menu-item>
                            <!--                        logo-->
                            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"
                                 stroke="currentColor"
                                 stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                 class="d-block mx-auto"
                                 role="img" viewBox="0 0 24 24" focusable="false"><title>
                                {{this.$store.state.webName}}</title>
                                <circle cx="12" cy="12" r="10"/>
                                <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
                            </svg>
                            <!--                        logo-->
                            <span class="logo-text"
                                  :class="isCollapse?'margin-left':''">创作者后台</span>
                        </el-menu-item>

                    </el-menu>
                </div>

                <el-menu
                        :default-active="activeIndex"
                        :collapse="isCollapse"
                        router
                        @select="handleSelect"
                        unique-opened
                        background-color="#3d4e63"
                        text-color="#fff"
                        active-text-color="#1dc4e9">
                    <template v-for="(item,index) in menuList">
                        <el-menu-item :index=" '/' + item.action" v-if="item.children.length == 0">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                        <el-submenu :index="index + '' " v-else>
                            <template slot="title" :index=" '/' + item.path">
                                <i :class="item.icon"/>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item v-if="item.children" :index=" '/' + secondary.action"
                                          v-for="(secondary,index) in item.children"
                                          :key="index">
                                <template slot="title">
                                    <i class="el-icon-s-unfold
"/>
                                    <span>{{secondary.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </el-aside>
            <div class="mark" v-show="markSHow" @click="isCollapses"></div>
            <!--            左边侧边 end-->
            <el-container>
                <!--                头部区域-->
                <el-header>
                    <div>
                        <!--                    开关侧边栏-->
                        <i :class=" isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
                           class="isCollapse-icon" @click="isCollapses"/>
                    </div>
                    <div>
                        <el-dropdown trigger="click" @command="handleCommand">
                            <el-avatar :src="headImg?headImg:defaultimg"></el-avatar>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="a">修改笔名</el-dropdown-item>
<!--                                <el-dropdown-item command="b">修改密码</el-dropdown-item>-->
                                <el-dropdown-item command="c">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <!--                头部区域end-->
                <!--                主体区域-->
                <el-main>
                    <router-view/>
                </el-main>
                <!--                主体end-->
            </el-container>
        </el-container>
        <el-dialog
                title="个人信息"
                :visible.sync="dialogVisibleuser"
                :width="this.$store.state.dialogWidth">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                        <el-form-item label="新笔名">
                            <el-input v-model="homeform.pen_name"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleuser = false" size="small">取 消</el-button>
    <el-button type="primary" @click="updateUser" size="small">确 定</el-button>
  </span>
        </el-dialog>
        <el-dialog
                title="修改密码"
                :visible.sync="dialogVisiblepas"
                :width="this.$store.state.dialogWidth">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                        <el-form-item label="旧密码">
                            <el-input v-model="pasform.password"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码">
                            <el-input v-model="pasform.new_password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码">
                            <el-input v-model="pasform.repeat_password"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblepas = false" size="small">取 消</el-button>
<!--    <el-button type="primary" @click="updatePas" size="small">确 定</el-button>-->
  </span>
        </el-dialog>
    </div>
</template>

<script>
  import {uploadimg} from "../utils/common";

  export default {
    name: 'Home',
    metaInfo() {
      return {
        title: '创作者中心', // set a title
      }
    },
    data() {
      return {
        homeform: {
          name: '',
          pen_name: '',
          phone: '',
          mail:'',
        },
        pasform: {
          password: '',
          new_password: '',
          repeat_password: ''
        },
        isCollapse: false,
        activeIndex: '/novel_list',
        menuList: [
          {
            name: "作品管理",
            action: "novel_list",
            icon: 'el-icon-tickets',
            children: []
          },
          {
            name: "打赏信息",
            action: "musang",
            icon: 'el-icon-star-on',
            children: []
          }, {
            name: "订阅信息",
            action: "submit",
            icon: 'el-icon-star-on',
            children: []
          },
          {
            name: "小说评论",
            action: "Novel_Comments",
            icon: 'el-icon-chat-square',
            children: []
          }
          // },{
          //   name: "基本信息",
          //   action: "baseInfo",
          //   icon: 'el-icon-user-solid',
          //   children: []
          // }
        ],
        dialogVisibleuser: false,
        dialogVisiblepas: false,
        defaultimg: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        webName: '',
        headImg: '',
        minWidth: '60px',
        maxWidth: '270px',
        windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
        markSHow: false,
      }
    },
    watch: {
      '$route'() {
        this.handleSelect(this.activeIndex)
      },
      windowWidth(val) {
        this.windowWidth = val;
        if (this.windowWidth <= 750) {
          this.minWidth = '0px';
          this.maxWidth = '180px';
          this.isCollapse = true;
        } else {
          this.minWidth = '60px';
          this.maxWidth = '270px';
          this.isCollapse = false;
        }
        this.judge();
      }
    },
    created() {
      let activeIndex = sessionStorage.getItem('activeIndex');
      if (activeIndex) {
        this.activeIndex = activeIndex;
      }
      this.getUserInfo();
      if (this.windowWidth <= 750) {
        this.minWidth = '0px';
        this.maxWidth = '75%';
        this.isCollapse = true;
      }
      this.judge();
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          window.fullWidth = document.documentElement.clientWidth;
          this.windowWidth = window.fullWidth; // 宽
        })()
      };
      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    },
    methods: {
      // 侧边开关
      judge() {
        if (this.windowWidth <= 750) {
          this.$store.dispatch('getNewDialogWidth', '90%');
          this.$store.dispatch('getNewLabelWidth', '100px');
          this.$store.dispatch('getNewPaginationLayout', 'total, sizes, prev, next');
          this.$store.dispatch('getNewElColNum', 24);
          this.$store.dispatch('getNewDialogMaxWidth', '90%');
          this.$store.dispatch('getNewSetLabelWidth', '100px');
        } else {
          this.$store.dispatch('getNewDialogWidth', '50%');
          this.$store.dispatch('getNewLabelWidth', '200px');
          this.$store.dispatch('getNewPaginationLayout', 'total, sizes, prev, pager, next, jumper');
          this.$store.dispatch('getNewElColNum', 15);
          this.$store.dispatch('getNewDialogMaxWidth', '80%');
          this.$store.dispatch('getNewSetLabelWidth', '300px');
        }
      },
      isCollapses() {
        this.isCollapse = !this.isCollapse;
        if (this.windowWidth <= 750) {
          this.markSHow = !this.isCollapse;
        }
      },
      handleSelect(index) {
        this.activeIndex = index;
        if (this.windowWidth <= 750) {
          this.isCollapse = true;
          this.markSHow = false;
        }
      },
      handleCommand(command) {
        // 退出登录
        if (command == 'c') {
          // this.$axios.post('admin/logout').then((res) => {
            sessionStorage.clear();
            this.$router.push('/');
            return
          // });
        }
        if (command == 'a') {
          this.dialogVisibleuser = true;
          return
        }
        if (command === 'b') {
          this.dialogVisiblepas = true;
          return;
        }

      },
      getUserInfo() {
        this.$axios.post('writer/writer/get_info').then((res) => {
          this.homeform = res.data;
          console.log(res.data);
        });
      },
      updateUser() {
        this.$axios.post('writer/writer/update', this.homeform).then((res) => {
          this.$message.success('成功');
          this.dialogVisibleuser = false;
          window.location.reload();
        });
      },
      beforeunloadHandler() {
        sessionStorage.setItem('activeIndex', this.activeIndex)
      }
    },
  }
</script>
<style scoped lang="less">
    @media screen and (max-width: 750px) {
        .el-aside {
            background-color: #3d4e63;
            color: #333;
            transition: all .5s;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 999;
            height: 100%;
        }

        .mark {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 998;
        }

        .el-aside::-webkit-scrollbar {
            display: none
        }
    }

    @media screen and (min-width: 750px) {
        .el-aside {
            background-color: #3d4e63;
            color: #333;
            transition: all .5s;
        }

        .el-aside::-webkit-scrollbar {
            display: none
        }
    }

    .logo-text {
        margin-left: 10px;
        color: #ffffff !important;
    }

    .d-block {
        color: #ffffff !important;
    }

    .margin-left {
        display: none;
    }

    .home-logo .el-menu-item {
        padding: 0 20px !important;
    }

    .home-logo .el-menu-item:hover {
        background-color: #3f4d67 !important;
    }


    .isCollapse-icon {
        font-size: 30px;
        cursor: pointer;
        color: #606266;
        cursor: pointer;

    }


    .home-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;

    }

    .el-header {
        background: #f4f7fa;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    .el-menu {
        border: none;
    }


</style>
